<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>规格管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
<!-- .box-body -->
<div class="box-header with-border">
	<h3 class="box-title">规格管理</h3>
</div>
<div class="box-body">
	<!-- 数据表格 -->
	<div class="table-box">
		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#addModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" onclick="deleteById()" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<!--模糊查询-->
		<div class="box-tools pull-right">
			<div class="has-feedback">
				规格名称：<input type="text" name="specName" id="specName2">
<!--				<button class="btn btn-default">查询</button>-->
				<input type="button" onclick="specificationList()" value="查询">
			</div>
		</div>
		<!--工具栏/-->
		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>
				<th class="" style="padding-right:0px">
					<input id="selall" type="checkbox" class="icheckbox_square-blue">
				</th>
				<th class="sorting_asc">规格ID</th>
				<th class="sorting">规格名称</th>
				<th class="text-center">操作</th>
			</tr>
			</thead>
			<tbody id="spec">
			</tbody>
		</table>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 增加窗口 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">规格编辑</h3>
			</div>
			<div class="modal-body">
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>规格名称</td>
						<td><input  class="form-control" name="specName" id="specName" placeholder="规格名称" >  </td>
					</tr>
				</table>
				<!-- 规格选项 -->
				<div class="btn-group">
					<button type="button" onclick="guige()" class="btn btn-default" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>
				</div>
				<table id="specOption" class="table table-bordered table-striped table-hover dataTable">
					<thead>
					<tr>
						<th class="sorting">规格选项</th>
						<th class="sorting">排序</th>
						<th class="sorting">操作</th>
					</thead>
					<tbody id="addtable">
					<tr>
						<td>
							<input  class="form-control" placeholder="规格选项">
						</td>
						<td>
							<input  class="form-control" placeholder="排序">
						</td>
						<td>
							<button type="button" class="btn btn-default" onclick="delrow()" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
						</td>
					</tr>
					<tr>

						<td>
							<input  class="form-control" placeholder="规格选项">
						</td>
						<td>
							<input  class="form-control" placeholder="排序">
						</td>
						<td>
							<button type="button" class="btn btn-default" onclick="delrow()" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
						</td>
					</tr>
					<tr>

						<td>
							<input  class="form-control" placeholder="规格选项">
						</td>
						<td>
							<input  class="form-control" placeholder="排序">
						</td>
						<td>
							<button type="button" class="btn btn-default" onclick="delrow()" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
						</td>
					</tr>
					</tbody>
				</table>


			</div>
			<div class="modal-footer">
				<button class="btn btn-success" onclick="insert()" data-dismiss="modal" aria-hidden="true">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel1">规格编辑</h3>
			</div>
			<div class="modal-body">
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>规格名称</td>
						<input type="hidden" name="id" id="idss">
						<td><input  class="form-control" name="specName1" id="specName1" placeholder="规格名称" >  </td>
					</tr>
				</table>
				<!-- 规格选项 -->
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>
				</div>
				<table id="specOption1" class="table table-bordered table-striped table-hover dataTable">
					<thead>
					<tr>
						<th class="sorting">规格选项</th>
						<th class="sorting">排序</th>
						<th class="sorting">操作</th>
					</thead>
					<tbody id="specById">
					</tbody>
				</table>


			</div>
			<div class="modal-footer">
				<button class="btn btn-success" onclick="updateInfo()" data-dismiss="modal" aria-hidden="true">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<a href="javascript:toPage(3)">首页</a>
<a href="javascript:toPage(1)">上一页</a>
<a href="javascript:toPage(2)">下一页</a>
<a href="javascript:toPage(4)">尾页</a>
第<input type="text" id="pageNum" name="pageNum" size="2px" >页
共<input type="text" id="total"  name="total" size="2px" readonly="readonly">条
总<input type="text" id="pages"  name="pages" size="2px" readonly="readonly">页
每页<input type="text" id="pageSize"  name="pageSize" size="2px" readonly="readonly">条
<script>
	$(function(){
		specificationList();
	})
	function specificationList(){
		$.ajax({
			url:"/specification/specificationList",
			data:{pageNum:$("#pageNum").val(),pageSize:$("#pageSize").val(),specName:$("#specName2").val()},
			type:"post",
			dataType:"json",
			async:false,
			success:function(result){
				if (result.code == 10000){
					var list = result.data.rows;
					var str = ''
					for (var i = 0; i < list.length;i++){
						str+='<tr>'
						str+='<td><input type="checkbox" name="box" value="'+list[i].id+'"></td>'
						str+='<td>'+list[i].id+'</td>'
						str+='<td>'+list[i].specName+'</td>'
						str+='<td className="text-center">'
						str+='<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="update('+list[i].id+')" data-target="#editModal">修改 </button>'
						str+='</td>'
						str+='</tr>'
					}
					$("#spec").html(str);
					pageinstall(result.data)
				}
			},error:function(result){
				alert("系统异常");
			}
		})
	}

	function deleteById(){
		var boxs = document.getElementsByName("box");
		var ids = [];
		for (var i= 0;i<boxs.length;i++){
			if (boxs[i].checked){
				ids[i] = boxs[i].value;
			}
		}
		if (ids.length == 0){
			alert("请选择要删除的选项");
			return;
		}
		$.ajax({
			url:"/specification/deleteInfo",
			data:{"ids":ids},
			type:"post",
			dataType:"json",
			async:false,
			success:function(result){
				specificationList();
			},error:function(){
				alert("系统异常");
			}
		})
	}

	function toPage(flag){
		var pageNum = parseInt($("#pageNum").val());
		var pages = parseInt($("#pages").val());
		if (flag == 1){//上一页
			if (pageNum <= 1){
				alert("已经是首页");
				return;
			}
			$("#pageNum").val(pageNum-1);
		}
		else if (flag == 2){//下一页
			if (pageNum >= pages){
				alert("已经是最后一页");
				return;
			}
			$("#pageNum").val(pageNum+1);
		}else if(flag == 3){
			$("#pageNum").val(1);
		}else  if (flag == 4){
			$("#pageNum").val(pages);
		}
		specificationList();

	}

	function pageinstall(page){
		$("#pageNum").val(page.pageNum);
		$("#pageSize").val(page.pageSize);
		$("#total").val(page.total);
		$("#pages").val(page.pages);
	}

	function insert(){
		var trs = $("#specOption").find("tr")
		var list1 = [];
		for (var i= 1; i < trs.length;i++){
			var tds = $(trs[i]).find('td');
			var name = $(tds[0]).find('input').val()
			var order = $(tds[1]).find('input').val()
			list1.push({optionName:name,orders:order})
		}
		var listJson = JSON.stringify(list1);
		$.ajax({
			url:"/specification/toAdd",
			data:{specName:$("#specName").val(),listJson:listJson},
			type:"post",
			dataType:"json",
			async:false,
			success:function(result){
				specificationList();
			},error:function(result){
				alert("系统异常");
			}
		})
	}

	function update(id){
		$.ajax({
			url: "/specification/update",
			data:{id:id},
			async: false,
			dataType: "json",
			type: "post",
			success: function (result) {
				var qwe = result.data;
				for (var q = 0; q<qwe.length;q++) {
					$("#idss").val(qwe[q].id)
					$("#specName1").val(qwe[q].specName)
				}
				var str = '';
				for (var i = 0; i <qwe.length;i++) {
					str+='<tr>'
					str+='<td>'
					str+='<input className="form-control" placeholder="规格选项" name="optionName" value="'+qwe[i].optionName+'">'
					str+='</td>'
					str+='<td>'
					str+='<input className="form-control" placeholder="排序" name="orders" value="'+qwe[i].orders+'">'
					str+='</td>'
					str+='<td>'
					str+='<button type="button" className="btn btn-default" title="删除"><i className="fa fa-trash-o"></i> 删除 </button>'
					str+='</td>'
					str+='</tr>'
				}
				$("#specById").html(str);
			},
			error: function (data) {
				alert("系统异常稍后重试")
			}
		})
	}

	function updateInfo(){
		var trs = $("#specOption1").find("tr")
		var list1 = [];
		for (var i= 1; i < trs.length;i++){
			var tds = $(trs[i]).find('td');
			var name = $(tds[0]).find('input').val()
			var order = $(tds[1]).find('input').val()
			list1.push({optionName:name,orders:order})
		}
		var listJson = JSON.stringify(list1);
		console.log(listJson)
		var id=$("#idss").val();
		$.ajax({
			url: "/specification/updateInfo",
			data: {id:id,listJson:listJson,specName:$("#specName1").val()},
			async: false,
			dataType: "json",
			type: "post",
			success: function (result) {
				specificationList();
			},
			error: function (data) {
				alert("系统异常稍后重试")
			}
		})
	}

	function guige(){
//一行
		var newTr = addtable.insertRow();
		//三列
		var newTd0 = newTr.insertCell();
		var newTd1 = newTr.insertCell();
		var newTd2 = newTr.insertCell();

		newTd0.innerHTML='<input  class=\"form-control\"  placeholder=\"规格选项\">';
		newTd1.innerHTML='<input  class=\"form-control\"  placeholder=\"排序\">';
		newTd2.innerHTML='<button type=\"button\" onclick="delrow()" class=\"btn btn-default\" title=\"删除\" ><i class=\"fa fa-trash-o\"></i> 删除</button>';

	}
	function delrow(){
		var i=addtable.rows.length;
		addtable.deleteRow(i-1);
	}
</script>

</body>

</html>